<script setup lang="ts">
import axios from 'axios'
import { onMounted, ref } from 'vue';
import {ChannelItem, ChannelResData} from '../types/data'
import {useChannelStore} from '../store/channel'
// 使用ts结合axios发起请求
// 使用axios.request()这种形式,可以使用泛型   不用axios()
// 1. 泛型使用的目的是告诉axios 返回数据的类型是啥样
// 2. 泛型一定要跟接口返回的一致,否则没有意义了

// 1.创建一个响应式数据
const channels = ref<ChannelItem[]>([])

onMounted(async () => {
  // 2. 调接口
  const res = await axios.request<ChannelResData>({
    url: 'http://geek.itheima.net/v1_0/channels'
  })
  // 给响应式数据赋值
  channels.value = res.data.data.channels
})
// 3. 利用v-for渲染在页面里

// 定义个变量接收仓库
const store = useChannelStore()

// 接收channelId
// defineProps<{
//   channelId: number
// }>()

// channel点击的时候将id传给父组件
// const emit = defineEmits<{
//   (e:'changeChannel', id: number): void
// }>()
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active:store.channelId === item.id }"
        href="javascript:;"
        v-for="(item, i) in channels"
        :key="item.id"
        @click="store.changeChannelId(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
